
var page={
    headerLeftLis:document.getElementsByClassName("header1leftli"),
    header2lis:document.getElementsByClassName("header-2-mid-li"),
    hiddenBoxs:document.getElementsByClassName("hiddenbox"),
    header2hiddenWrap:document.getElementById("header2hidden"),
    mb1LeftLis:document.getElementsByClassName("mainbody-1-left-li"),//侧边导航
    mb1HideBox:document.getElementsByClassName("mainbody-1-hidden-box"),
    imagesCol:document.getElementsByClassName("images"),//轮播图图片集合
    picIndex:0,
    btns:document.getElementsByClassName("glyphicon"),//part3 按钮
    mb3Contents:document.getElementsByClassName("mainbody-3"),
    homeEleConParts:document.getElementsByClassName("homeele-content-part"),
    homeEleChoices:document.getElementsByClassName("homeele-choice"),
    smartConParts:document.getElementsByClassName("smart-content-part"),
    smartChoices:document.getElementsByClassName("smart-choice"),
    bookCarouselControls:document.getElementsByClassName("book-carousel-controls"),
    bookCarouselUl:document.getElementsByClassName("book-carousel-ul")[0],
    bookCarouselLis:document.getElementsByClassName("book-carousel-li"),
    themeCarouselUl:document.getElementsByClassName("theme-carousel-ul")[0],
    themeCarouselLis:document.getElementsByClassName("theme-carousel-li"),
    gameCarouselUl:document.getElementsByClassName("game-carousel-ul")[0],
    gameCarouselLis:document.getElementsByClassName("game-carousel-li"),
    useCarouselUl:document.getElementsByClassName("use-carousel-ul")[0],
    useCarouselLis:document.getElementsByClassName("use-carousel-li"),
    controls:document.getElementsByClassName("controls"),
    circleLis:document.getElementsByClassName("circle-li"),
    circleUls:document.getElementsByClassName("circle-ul"),
    carouselCurrIndexs:[],
    // objCurrIndex:0,
    bookIndex:2,
    themeIndex:1,
    gameIndex:0,
    useIndex:0,
    allCarouselControls:document.getElementsByClassName("carousel-controls"),
    allCarouselUls:document.getElementsByClassName('carousel-ul'),
    // 内容
    contentParts:document.getElementsByClassName('content-content-part'),
    init:function(){
        // this.carouselCurrIndexs[0]=parseInt(this.bookCarouselLis.length/2)+parseInt(this.bookCarouselLis.length%2)-1;
        this.carouselCurrIndexs=[1,2];
        // this.bookCarouselUl.style.marginLeft=-parseInt(this.bookCarouselLis.length/2)*296+'px';
        // this.bookCarouselUl.style.width=this.bookCarouselLis.length*296+'px';
        HTMLCollection.prototype.toArray=function(){
            return [].slice.call(this);
        };
        this.allCarouselUls.toArray().forEach(function(curr,index){
            var len=curr.getElementsByClassName('carousel-li').length;
            if(len%2==0){
                curr.style.marginLeft=0+'px';
            }else{
                curr.style.marginLeft=-parseInt(len/2)*296+'px';
            }
            curr.style.width=len*296+'px';
        });
        this.addEvent();
    },
    addEvent:function(){
        var _this=this;
        //轮播图
        setInterval(function(){
            if(_this.picIndex>=_this.imagesCol.length){
                _this.picIndex=0;
            }
            _this.imagesCol.toArray().forEach(function(curr,index){
                curr.style.opacity=0;
                if(index==_this.picIndex) curr.style.opacity=1;
            });
            _this.picIndex+=1;
        },1000);
        this.headerLeftLis.toArray().forEach(function(curr,index){
            curr.addEventListener('click',function(){
                _this.to(index);
            });
        });
        this.header2lis.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.header2hiddenWrap.style.zIndex=4
                _this.show('hiddenboxs',index);
            });
            curr.addEventListener('mouseout',function(){
                _this.header2hiddenWrap.style.zIndex=-4
                _this.hide('hiddenboxs',index);
            });
        });
        this.mb1LeftLis.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.show('mb1leftlis',index);
            });
            curr.addEventListener('mouseout',function(){
                _this.hide('mb1leftlis',index);
            });
        });
        this.mb1HideBox.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.show('mb1leftlis',index);
            });
            curr.addEventListener('mouseout',function(){
                _this.hide('mb1leftlis',index);
            });
        });
        this.hiddenBoxs.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                console.log("a");
                _this.header2hiddenWrap.style.zIndex=4
                _this.show('hiddenboxs',index);
            });
            curr.addEventListener('mouseout',function(){
                _this.header2hiddenWrap.style.zIndex=-4
                _this.hide('hiddenboxs',index);
            });
        });
        this.btns[0].addEventListener('click',function(){
            _this.pre();
            _this.btns.toArray().forEach(function(curr,index){
                curr.style.boxShadow="inset 2px 2px 1px 1px rgba(0,0,0,.1)";
            });
            _this.btns[0].style.boxShadow="inset 20px 20px 1px 1px rgba(0,0,0,.1)";
        }); //pre
        this.btns[1].addEventListener('click',function(){
            _this.next();
            _this.btns.toArray().forEach(function(curr,index){
                curr.style.boxShadow="inset 2px 2px 1px 1px rgba(0,0,0,.1)";
            });
            _this.btns[1].style.boxShadow="inset 20px 20px 1px 1px rgba(0,0,0,.1)";
        }); //next
        this.homeEleChoices.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.show('homeele',index);
            });
        });
        this.smartChoices.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.show('smart',index);
            });
        });
        // this.bookCarouselControls.toArray().forEach(function(curr,index){
        //     curr.addEventListener('click',function(){
        //         _this.show('carousel',index);
        //     });
        // });
        this.allCarouselControls.toArray().forEach(function(curr,index){
            if(new RegExp('book').test(curr.className)){
                curr.addEventListener('click',function(){
                    _this.show('carousel',index);
                });
            }else if(new RegExp('theme').test(curr.className)){
                curr.addEventListener('click', function () {
                    _this.show('carousel', index);
                });
            }else if(new RegExp('game').test(curr.className)){
                curr.addEventListener('click',function(){
                    _this.show('carousel',index);
                });
            }else if(new RegExp('use').test(curr.className)){
                curr.addEventListener('click',function(){
                    _this.show('carousel',index);
                });
            }  
            
        });
        this.contentParts.toArray().forEach(function(curr,index){
            curr.addEventListener('mouseover',function(){
                _this.controls[index].style.opacity=1;
            });
            curr.addEventListener('mouseout',function(){
                _this.controls[index].style.opacity=0;
            });
            var lis=curr.getElementsByClassName("circle-li");
            var ul=curr.getElementsByClassName("circle-ul")[0];
            ul.style.width=12*lis.length+(lis.length-1)*20+'px';
            // console.log(lis);
            lis.toArray().forEach(function(curr2,index2){
                
                curr2.addEventListener('click',function(){
                    lis.toArray().forEach(function(curr3,index3){
                        curr3.style.backgroundColor="#b0b0b0";
                        curr3.style.borderColor="#b0b0b0";
                    });
                    curr2.style.backgroundColor="transparent";
                    curr2.style.borderColor="#ff6700";
                    _this.slideCarousel(curr,curr2,index2);
                });
            });
        });
    },
    slideCarousel:function(parent,obj,index){
        // console.log(parent);
        // console.log(index);
        var objUl=parent.getElementsByClassName('carousel-ul')[0];
        // console.log(objUl.className);
        var objLis=parent.getElementsByClassName('carousel-li');
        var len=objLis.length;
        var result=parseInt(len/2);
        var remain=len%2;
        var midnum=result+remain-1;//中位数  从0开始算起
        if(new RegExp('book').test(objUl.className)){
                this.bookIndex=index;
        }else if(new RegExp('theme').test(objUl.className)){
                this.themeIndex=index;
        }else if(new RegExp('game').test(objUl.className)){
               this.gameIndex=index;
        }else if(new RegExp('use').test(objUl.className)){
                this.useIndex=index;
        }  
                if (len % 2 == 0) {
                    //偶数个
                    if (index >= 0 && index < len) {
                        objUl.style.marginLeft = -index*296 + 'px';
                    }
                }else {
                    //奇数个
                    if (index >= 0 && index < len) {
                        if (index == midnum) {
                            objUl.style.marginLeft =  -midnum*296 + 'px';
                        }
                        else if (index > midnum) {
                            objUl.style.marginLeft =  -midnum*296- (index-midnum)* 296 + 'px';
                        }
                        else if (index < midnum) {
                            objUl.style.marginLeft = -midnum*296 + (midnum-index)*296 + 'px';
                        }
                    }

                }
    },
    pre:function(){
        this.show('mb-3',0);
    },
    next:function(){
        this.show('mb-3',1);
    },
    show:function(obj,para){
        // console.log(para);
        switch(obj){
            case 'hiddenboxs':{
                this.hiddenBoxs.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                    if(para==index){
                        curr.style.display='inline-block';
                        curr.style.opacity=1;
                    }
                });
                break;
            }
            case 'mb1leftlis':{
                this.mb1HideBox.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                    curr.style.display="none";
                    if(para==index){
                        curr.style.display="inline-block";
                        curr.style.opacity=1;
                    }
                });
                break;
            }
            case 'mb-3':{
                this.mb3Contents.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                    if(index==para){
                        curr.style.opacity=1;
                    }
                });
                break;
            }
            case 'homeele':{
                this.homeEleConParts.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                    curr.style.zIndex=0
                    if(index==para){
                        curr.style.opacity=1;
                        curr.style.zIndex=5
                    }
                });
                break;
            }
            case 'smart':{
                this.smartConParts.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                    curr.style.zIndex=0
                    if(index==para){
                        curr.style.opacity=1;
                        curr.style.zIndex=5
                    }
                });
                break;
            }
            case 'carousel':{
                // alert(this.objCurrIndex);//1
                var objLis;
                var objUl;
                var objCurrIndex;
                var objCircleLis;
                switch(para){
                    case 0:{}
                    case 1:{
                        objLis=this.bookCarouselLis;
                        objUl=this.bookCarouselUl;
                        objCurrIndex=this.bookIndex;
                        objCircleLis=this.circleUls[0].getElementsByClassName('circle-li');
                        break;
                    }
                    case 2:{}
                    case 3:{
                        objLis=this.themeCarouselLis;
                        objUl=this.themeCarouselUl;
                        objCurrIndex=this.themeIndex;
                        objCircleLis=this.circleUls[1].getElementsByClassName('circle-li');
                        break;
                    }
                    case 4:{}
                    case 5:{
                        objLis=this.gameCarouselLis;
                        objUl=this.gameCarouselUl;
                        objCurrIndex=this.gameIndex;
                        objCircleLis=this.circleUls[2].getElementsByClassName('circle-li');
                        break;
                    }
                    case 6:{}
                    case 7:{
                        objLis=this.useCarouselLis;
                        objUl=this.useCarouselUl;
                        objCurrIndex=this.useIndex;
                        objCircleLis=this.circleUls[3].getElementsByClassName('circle-li');
                        break;
                    }
                }
                var len=objLis.length;
                switch(Boolean(para%2)){
                    case false:{
                        //pre
                        if (objCurrIndex > 0 && objCurrIndex < len) {
                            objUl.style.marginLeft = parseInt(objUl.style.marginLeft) + 296 + 'px';
                            objCurrIndex -= 1;

                        } else {
                            objCurrIndex = 0;
                        }
                        break;
                    }
                    case true:{
                        //next
                        // alert(objCurrIndex);
                        if (objCurrIndex + 1 < len) {
                            objUl.style.marginLeft = parseInt(objUl.style.marginLeft) - 296 + 'px';
                            objCurrIndex += 1;
                        } else {
                            objCurrIndex = objLis.length - 1;
                        }
                        break;
                    }
                }
                objCircleLis.toArray().forEach(function(curr3,index3){
                    curr3.style.backgroundColor="#b0b0b0";
                    curr3.style.borderColor="#b0b0b0";
                });
                switch(para){
                    case 0:{}
                    case 1:{
                        this.bookIndex=objCurrIndex;
                        objCircleLis[objCurrIndex].style.backgroundColor="transparent";
                        objCircleLis[objCurrIndex].style.borderColor="#ff6700";
                        break;
                    }
                    case 2:{}
                    case 3:{
                         this.themeIndex=objCurrIndex;
                         objCircleLis[objCurrIndex].style.backgroundColor="transparent";
                         objCircleLis[objCurrIndex].style.borderColor="#ff6700";
                        
                        break;
                    }
                    case 4:{}
                    case 5:{
                        this.gameIndex=objCurrIndex;
                        objCircleLis[objCurrIndex].style.backgroundColor="transparent";
                        objCircleLis[objCurrIndex].style.borderColor="#ff6700";
                        
                        break;
                    }
                    case 6:{}
                    case 7:{
                         this.useIndex=objCurrIndex;
                         objCircleLis[objCurrIndex].style.backgroundColor="transparent";
                         objCircleLis[objCurrIndex].style.borderColor="#ff6700";
                        
                        break;
                    }
                }
                break;
            }
        }
    },
    hide:function(obj,para){
        // console.log(para);
        switch(obj){
            case 'hiddenboxs':{
                this.hiddenBoxs.toArray().forEach(function(curr,index){
                    curr.style.display="none";
                    curr.style.opacity=0;
                });
                break;
            }
            case 'mb1leftlis':{
                this.mb1HideBox.toArray().forEach(function(curr,index){
                    curr.style.display="none";
                    curr.style.opacity=0;
                });
                break;
            }
            case 'homeele':{
                this.homeEleConParts.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                });
                break;
            }
            case 'smart':{
                this.smartConParts.toArray().forEach(function(curr,index){
                    curr.style.opacity=0;
                });
                break;
            }
        }
    },
    to:function(para){
        alert(para);
    }
}
page.init();
// piclunbo()
